<template>
	<view class="container">
		<view class="card-container" v-if="list.length > 0">
			<scroll-view v-if="list.length>0" :style="{ height: height + 'px'}" scroll-y="true"
				:scroll-with-animation="true" :enable-back-to-top="true" @scrolltolower="reachBottom">
				<view class="card" v-for="(item,index) in list" :key="index">
					<view class="u-flex-row" style="align-items: center;">
						<u-checkbox-group shape="circle" placement="column" v-if="!isHideCheck">
							<u-checkbox :label="item.name" :checked="item.select" :name="item.id"
								@change="radioChange($event,index,item.id)"></u-checkbox>
						</u-checkbox-group>
						<text class="t-name" v-else>{{item.name}}</text>
						<view class="u-m-l-20"></view>
						<u-tag v-if="item.isDefault" text="默认" size="mini" type="primary" />
					</view>
					<view class="btn-warp">
						<view class="u-m-r-20">
							<u-button type="error" size="small" shape="circle" @click="openDel(item)">删除</u-button>
						</view>
						<view>
							<u-button type="primary" size="small" shape="circle"
								@click="showAddType(item)">编辑</u-button>
						</view>
					</view>
				</view>
				<view style="height: 50rpx"></view>
			</scroll-view>
		</view>
		<u-empty text="暂无商品分组" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-else></u-empty>
		<view class="addBtn" id="bottom">
			<view class="btn" v-if="!isHideCheck">
				<view style="width:350rpx;"><u-button shape="circle" type="primary"
						@click="showAddType(null)">新建分组</u-button></view>
				<view style="width:350rpx;"><u-button shape="circle" type="primary" @click="ok()">确定</u-button></view>
			</view>
			<view class="btn" v-else>
				<view style="width:100%;">
					<u-button shape="circle" type="primary" @click="showAddType(null)">新建分组</u-button>
				</view>
			</view>
		</view>
		<u-modal :show="isEditTypeShow" :title=" this.form.id==null?'新增分组':'修改分组'" width="600rpx"
			:showCancelButton="true" @cancel="hideEdit" @confirm="submit">
			<view class="slot-content">
				<u-form :model="form" ref="uForm" :labelStyle="labelStyle">
					<u-form-item label="商品分组" label-width="80">
						<u-input v-model="form.name" type="text" border="bottom" maxlength="20"
							:placeholderStyle="labelStyle" placeholder="商品类型名称" />
					</u-form-item>
					<u-form-item label="设置为默认" label-width="80">
						<u-switch v-model="form.isDefault" slot="right" activeColor="#6072FF" @change="isDefaultChange"
							:activeValue="true" :inactiveValue="false" />
					</u-form-item>
				</u-form>
			</view>
		</u-modal>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				isHideCheck: false,
				height: 0,
				list: [],
				isEditTypeShow: false,
				selectedIndex: -1,
				selectedId: -1,
				id: 0,
				loadStatus: 'nomore',
				form: {
					id: '',
					name: '',
					isDefault: false,
					type: this.$commodityGroupTypeEnum.GENERAL_GOODS,
					totalPage: 1,
					pageNum: 1,
					pageSize: 10,
					branchType: '',
				},
				labelStyle: {
					fontSize: '28rpx'
				}
			}
		},
		onLoad(option) {
			if (option.branchType) {
				this.form.branchType = option.branchType
				console.log('branchType', option.branchType)
			}
			if (option.id) {
				this.selectedId = option.id;
			}
			if (option.isHideCheck) {
				this.isHideCheck = option.isHideCheck;
			}
      // 默认用2通用了
			// this.form.type = option.type;
			this.findData();
		},
		onReady() {
			this.getPomHeight();
		},
		methods: {

			isDefaultChange(e) {
				if (e) {
					this.$helpers.toast("开启默认分组");
				} else {
					this.$helpers.toast("关闭默认分组");
				}
			},
			ok() {
				if (this.selectedIndex == -1) {
					this.$helpers.toast('分组至少选择一项');
					return;
				}
				// console.log(this.list[this.selectedIndex],'返回数据')
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				prevPage.$vm.commodityGroups = this.list[this.selectedIndex]; //修改上一页data里面的data参数值
				uni.navigateBack();
			},
			radioChange(e, index, id) {
				this.list = this.list.map(item => ({
					...item,
					select: false
				}));
				this.list[index].select = true;
				this.selectedId = id;
				this.selectedIndex = index
			},
			//列表数据
			findData() {
				this.$api('commodityGroup.findByUserIdAndType', this.form).then(res => {
					if (res.status == 0) {
						this.form.pageNum = res.data.pageNum;
						this.form.totalPage = res.data.pages;
						this.loadStatus = res.data.pageNum === res.data.pages ? 'nomore' : 'loadmore';
						let data = res.data.list;
						data.forEach((item, index) => {
							if (item.id == this.selectedId) {
								this.selectedIndex = index;
								this.$set(item, 'select', true)
							} else {
								this.$set(item, 'select', false)
							}
						});
						this.list.push(...data);
						if (this.form.totalPage == 0) {
							this.loadStatus = 'nomore';
						}
					} else {
						this.$helpers.toast("查询数据失败", res.msg);
					}
				})
			},
			showAddType(data) {
				if (data != null) {
					this.form.id = data.id;
					this.form.name = data.name;
					this.form.isDefault = data.isDefault;
				}
				this.isEditTypeShow = true;
			},
			submit() {
				uni.showLoading({
					title: '请稍等...',
					mask: true
				})
				if (this.$u.test.isEmpty(this.form.name)) {
					this.$helpers.toast('请填写分组名称')
					uni.hideLoading();
					return;
				}
				this.$api('commodityGroup.insertOrUpdate', this.form).then(res => {
					if (res.status == 1) {
						getApp().err("修改不成功：" + res.msg);
					} else {
						this.$helpers.toast(this.form.id > 0 ? '编辑成功' : '添加成功')
						this.refresh();
						this.hideEdit();
					}
					uni.hideLoading();
				})
			},
			openDel(data) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定删除[' + data.name + ']分组吗？',
					success(res) {
						if (res.confirm) {
							that.id = data.id
							that.del();
						}
					}
				});
			},
			//删除
			del() {
				this.$api('commodityGroup.deleteById', {
					id: this.id
				}).then(res => {
					if (res.status == 1) {
						this.$helpers.toast(res.msg)
					} else {
						this.$helpers.toast('删除成功')
						//如果删除的是 上一次选中的则清空添加页面的数据
						if (this.selectedId == this.id) {
							let pages = getCurrentPages(); //获取所有页面栈实例列表
							let prevPage = pages[pages.length - 2]; //上一页页面实例
							prevPage.$vm.commodityGroups = null; //修改上一页data里面的data参数值
						}
						this.refresh();
					}
				})
			},
			reachBottom() {
				if (this.form.pageNum === this.form.totalPage) {
					return;
				};
				this.whetherToAdd = true;
				this.form.pageNum++;
				this.loadStatus = 'loading'
				this.findData();
			},
			getPomHeight() {
				let query = wx.createSelectorQuery().in(this)
				query.select('#bottom').boundingClientRect()
				query.exec(res => {
					let windowHeight = wx.getSystemInfoSync().windowHeight
					this.height = windowHeight
					for (let i = 0; i < res.length; i++) {
						this.height -= res[i].height;
					}
				})
			},
			refresh() {
				this.list = [];
				this.form.pageNum = 1;
				this.form.totalPage = 1;
				this.findData();
			},

			//取消
			hideEdit() {
				this.form.id = null;
				this.form.name = '';
				this.isEditTypeShow = false;
			}
		}
	}
</script>

<style lang="scss">
	.t-name {
		color: #606266;
		font-size: 30rpx;
		line-height: 30rpx;
	}

	.u-empty {
		margin-top: 270rpx !important;
	}

	.u-modal__content,
	.u-form-item__body {
		padding: 10rpx 27rpx !important;
	}

	.u-modal__title {
		font-size: $f-lg !important;
		padding-top: 20px !important;
		color: #303133 !important;
	}

	.u-input__content__field-wrapper__field {
		font-size: $f-base !important;
		color: rgba(0, 0, 0, 0.8) !important;
	}


	/deep/ .u-form-item__body {
		padding: 36rpx 0 !important;
	}

	/deep/ .u-input__content__field-wrapper__field {
		font-size: $f-base !important;
	}

	/deep/ .u-checkbox-group--column {
		max-width: 320rpx;
	}

	.container {
		.card-container {
			padding: 20rpx 20rpx;

			.card {
				background-color: white;
				border-radius: $uni-border-radius-lg;
				padding: 35rpx 20rpx;
				display: flex;
				justify-content: space-between;
				margin-bottom: 25rpx;
				align-items: center;

				.title {
					font-size: $f-base;
					color: rgba(0, 0, 0, 0.8);
				}

				.btn-warp {
					display: flex;
				}
			}
		}

		.addBtn {
			z-index: 99;
			border-top: 1px solid #fafafa;
			width: 100%;
			height: 136rpx;
			background-color: white;
			position: fixed;
			bottom: 0rpx;

			.btn {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 20rpx 0 20rpx;
			}
		}
	}
</style>